<!--  -->
<script setup>

import { onMounted } from 'vue'

onMounted(() => { window.addEventListener('scroll', scrollFunction, true) })

function scrollFunction() {
  const btn = document.getElementById('back-to-top')
  if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
    btn.classList.add('show')
  } else {
    btn.classList.remove('show')
  }
}

</script>

<template>
  <div>
    <a id="back-to-top" href="#"></a>
  </div>
</template>


<style lang="scss" scoped>
#back-to-top {
  position: fixed;
  top: 5px;
  right: 40px;
  z-index: 90;

  opacity: 0;
  transition: all .5s ease;

  background-color: transparent;

  padding-top: 25px;
  width: 0;
  height: 0;
  border: 10px solid rgb(183, 255, 0);
  border-bottom: 15px solid transparent;
  filter: drop-shadow(0 5px 2px rgba(93, 93, 93, 0.5));


  @media screen and (max-width: 446px) {
    padding-top: 85px;
    right: 3px;
  }

  @media screen and (min-width: 447px) and (max-width: 768px) {
    padding-top: 50px;
    right: 5px;
  }

}


#back-to-top:hover {
  border: 10px solid rgb(110, 222, 253);
  border-bottom: 15px solid transparent;
}

#back-to-top.show {
  opacity: 1;
  top: 25px;
}
</style>
